<template>
	<view class="agent">
		<view class="head">
			共
			<span>{{ agentList.length }}</span>
			人
		</view>
		<view class="t_tou">
			<view class="tou_1">头像</view>
			<view class="tou_1">昵称</view>
			<view class="tou_1">时间</view>
		</view>
		<view class="t">
			<None v-if="list_empty"></None>
			<view class="agent" v-else v-for="(item, index) of agentList" :key="index">
				<li class="t_01">
					<view class="t_01_1"><image :src="item.avatar" class="image"></image></view>
					<view class="t_01_1">{{ item.nickname }}</view>
					<view class="t_01_1">{{ item.lastLoginTime.split(" ")[0] }}</view>
				</li>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import None from '@/components/qy/none.vue';
export default {
	data() {
		return {
			agentList: [],
			list_empty: false
		};
	},
	components: { None },
	onLoad() {
		this.getAllReferrer();
	},
	methods: {
		...mapActions(['getReferrer']),
		getAllReferrer() {
			uni.showLoading({ mask: true });
			this.getReferrer().then(res => {
				this.agentList = res.data.invitation || [];
				if (!this.agentList.length) {
					this.list_empty = true;
				}
				uni.stopPullDownRefresh();
				uni.hideLoading();
			});
		}
	},
	onPullDownRefresh() {
		this.getAllReferrer();
	}
};
</script>

<style lang="less">
.agent {
	.none {
		padding: 150px 0;
		text-align: center;
		color: #00a9f4;
		line-height: 50px;
		img {
			width: 60px;
			height: 60px;
		}
	}
	.head {
		background-color: #e0451d;
		color: #fff;
		text-align: center;
		padding: 40px 10px 30px;
	}
	.head span {
		font-size: 30px;
		padding: 0 5px;
		font-size: 18px;
	}
	.t_tou {
		display: flex;
		padding: 10px;
		height: 40px;
		line-height: 30px;
	}
	.tou_1 {
		width: 34%;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}
	.t_01 {
		display: flex;
		min-height: 50px;
	}
	.t_01_1 {
		width: 34%;
		text-align: center;
		font-size: 14px;
		flex:0 0 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.image{
			width:40px;
			height:40px;
			display:block;
			border-radius: 50%;
		}
	}
	.t_01_1 img {
		margin-top: 8px;
		width: 35px;
		height: 35px;
		border-radius: 35px;
	}
	.t li:nth-of-type(odd) {
		background-color: #eeeeee;
	}
	.t li:nth-of-type(even) {
		background-color: #fff;
	}
}
</style>
